<template>
	<section v-loading="listLoading">
		<!--列表-->
		<el-table :data="users" border stripe highlight-current-row style="width: 100%;">
			<el-table-column prop="id" label="ID" align="center"></el-table-column>
			<!--<el-table-column prop="content" label="协议内容" min-width="400" align="center">
                <template slot-scope="scope">
					<div class="maxH" v-if="scope.row.content" v-html="scope.row.content.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ')"></div>
				</template>
            </el-table-column>-->
            <el-table-column prop="type" label="类型" min-width="60" align="center">
            	<template slot-scope="scope">
            		<span>{{scope.row.type===1?'用户协议' :scope.row.type===2?'隐私协议' :scope.row.type===3?'提升指南' :scope.row.type===4?'关于我们' :scope.row.type === 5?'首页滚动公告' :scope.row.type === 6?'VIP会员服务协议' :scope.row.type === 7?'会员特权说明' :scope.row.type===8?'备职活动服务协议' :'邀请活动说明'}}</span>
            	</template>
			</el-table-column>
			<el-table-column label="操作" width="120" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
        <!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" width="800px">
			<el-form :model="editForm" label-width="80px" ref="editForm">
				<el-form-item label="内容" prop="content" v-if="editForm.type==1 || editForm.type==2">
		            <quill-editor id="editor" v-model="editForm.content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
		            <el-upload class="avatar-uploader" :http-request="Upload" :multiple="true" :show-file-list="false" action="" :before-upload="beforeAvatarUpload" accept="image/*"></el-upload>
		        </el-form-item>
		        <el-form-item label="内容" prop="content" v-if="editForm.type==3 || editForm.type==4 || editForm.type==5">
					<el-input  v-model="editForm.content" type="textarea" autosize auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click.native="editFormVisible = false">取消</el-button>
				<el-button size="mini" type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>
<script>
import { client } from '../../common/js/alioss'
const toolbarOptions = [
	[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
	['bold', 'italic', 'underline', 'strike'],// toggled buttons
	['blockquote', 'code-block'],
	[{ 'list': 'ordered'}, { 'list': 'bullet' }],
	[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
	[{ 'direction': 'rtl' }], // text direction
	[{ 'align': [] }],
	['image']
]
	export default {
		data() {
			return {
				users: [],
				listLoading: false,
				editFormVisible: false,
				editLoading: false,
				editForm: {
					id: '',
                    content: '',
                    type:''
				},
				editorOption: {
		        placeholder: '',
		        theme: 'snow',  // or 'bubble'
		        modules: {
		            toolbar: {
		                container: toolbarOptions,  // 工具栏
		                handlers: {
		                    'image': function (value) {
		                        if (value) {
		                        // 触发input框选择图片文件
		                            document.querySelector('.avatar-uploader input').click()
		                        } else {
		                            this.quill.format('image', false);
		                        }
		                    }
		                }
		            }
		        }
		      },
			}
		},
		methods: {
			
		    //失去焦点事件
		    onEditorBlur(editor){
		    },
		    //获得焦点事件
		    onEditorFocus({editor,html,text}){
			    let dada = editor.delta.ops
			    let imgValue = dada.filter(item => {
			        if (item.insert.image) {
			            return true
			        }
			    }).map(item => item.insert.image).toString()
			    this.images = imgValue
		    },
		    //编辑器文本发生变化
		    onEditorChange({editor,html,text}){
		        this.editForm.photo=[]
		    },
		    Upload(file) {
		      var fileName = 'webStorage/web_' + file.file.uid+Math.floor(Math.random()*10000) + file.file.name.substr(file.file.name.indexOf("."));
		      let quill = this.$refs.myQuillEditor.quill;
					client().put(fileName, file.file).then(result => {
		        let length = quill.getSelection().index;
		        quill.insertEmbed(length, 'image', result.url);
		        quill.setSelection(length + 1);
		        this.listLoading = false;
					}).catch(function (err) {
			       		
			 		});
		    },
		  	//添加图片
			beforeAvatarUpload(file) {},//图片上传到阿里云
			formatDate(row, column) {
                let date = new Date(parseInt(row.createTime));
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s;
            },
			getUsers:function (){
				this.listLoading = true;
				let para = {
					page: this.page,
					size: this.pageSize,
				};
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/platform/manage/getHtmlList', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.total = res.total;
						this.users = res.data;
						this.listLoading = false;
					}
				});
			},
			getData (id){
				
				let para = {
					id:id
				};
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/platform/manage/getHtmlDetails', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.editForm.content = res.data.content;
					}
				});
			},
            //显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				this.editForm.id = row.id;
				this.editForm.type = row.type;
				this.getData(row.id)
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = {
								id:this.editForm.id,
								content:this.editForm.content,
							}
							var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
							});  
							instance.post('admin/platform/manage/updHtml', this.qs.stringify(para)).then(data => {
								
								let  res = data.data;
								if (res.code !== 0) {
									this.$message({
										message: res.msg,
										type: 'error'
									});
								} else {
									this.editLoading = false;
									this.$message({
										message: '提交成功',
										type: 'success'
									});
									this.$refs['editForm'].resetFields();
									this.editFormVisible = false;
									this.getUsers();
								}
							});
						});
					}
				});
			}
		},
		mounted() {
			this.getUsers();
		}
	}
</script>
<style scoped>
</style>